<template>
	<view class="home">
		<scroll-view class="navscroll" scroll-x>
			<view class="row" :key="item.id" :class="navIndex == index ? 'active' : ''" v-for="(item, index) in navArr"
				@click="clickNav(item.id)">{{ item.classname }}</view>
		</scroll-view>

		<view class="content" v-if="card.length">
			<view v-for="item in card" :key="item.id">
				<uni-card :title="item.staffName" :sub-title="item.orderTime"
					:extra="getPayStatus(item.payStatus, item.status)" :thumbnail="item.image">

					<view class="uni-card-content">
						<text>本次预约花费：¥{{ item.amount }}</text>

						<button type="primary" size="mini" v-if="item.payStatus === 0 && item.status === 1"
							@click="toPay(item.number)">去支付</button>
					</view>
				</uni-card>
			</view>
			<view v-if="!hasMoreData">
				<text class="text-center">我可是有底线的，你还要看更多？</text>
			</view>
		</view>
		<view class="no-data" v-else>
			当前什么都没有哦，快去预约吧！
		</view>
	</view>
</template>

<script setup>
import {
	ref
} from 'vue';
import {
	getOrderList, payOrder
} from '@/api/apis.js'
import {
	onLoad, onReachBottom
} from "@dcloudio/uni-app";

const getPayStatus = (payStatus, status) => {
	if (payStatus === 0) {
		if (status === 4) {
			return '已取消'; // payStatus 为 0 且 status 为 4
		}
		return '未支付'; // payStatus 为 0 且 status 不为 4
	}

	switch (payStatus) {
		case 1:
			return '已支付';
		case 2:
			return '退款';
		default:
			return ''; // 默认返回空字符串
	}
};


// 设置静态数据
const navArr = ref([{
	id: 3,
	classname: '全部' // 全部不用传递id
},
{
	id: 1,
	classname: '已支付'
},
{
	id: 0,
	classname: '未支付'
},
{
	id: 2,
	classname: '退款'
}
]);

const navIndex = ref(0); // 当前选中导航索引


const card = ref([]); // 用于存储订单数据
const currentPage = ref(1); // 当前页码
const pageSize = 10; // 每页显示的记录数
const hasMoreData = ref(true); // 是否还有更多数据可加载
let isInitialLoad = true;
// 点击导航的处理函数
const clickNav = (id) => {
	if (navArr.value[navIndex.value].id === id && !isInitialLoad) {
		// console.log("当前导航已选中");
		return;
	}
	// console.log("点击了导航", id);
	currentPage.value = 1; // 重置页码
	navIndex.value = navArr.value.findIndex(item => item.id === id); // 更新当前导航索引
	// 判断是否为全部订单
	if (id === 3) {
		loadOrders(); // 不传递 payStatus
	} else {
		loadOrders(id); // 传递对应的 payStatus
	}
	// 设置标志位为 false，表示已经完成第一次加载
	isInitialLoad = false;
};

// 加载订单数据的函数
const loadOrders = (payStatus) => {
	const params = {
		page: currentPage.value,
		pageSize
	};

	// 当 payStatus 未传递时，params 只包含 page 和 pageSize
	if (payStatus !== undefined) {
		params.payStatus = payStatus; // 仅当存在 payStatus 时传递
	}
	getOrderList(params).then(res => {
		if (currentPage.value === 1) {
			hasMoreData.value = true; // 第一页数据加载完毕，设置 hasMoreData 为 true
			card.value = res.data.records; // 如果是第一页，重置订单数据
		} else {
			card.value = [...card.value, ...res.data.records]; // 否则追加数据
		}
		// 检查返回的数据数量
		if (res.data.records.length < pageSize) {
			hasMoreData.value = false; // 没有更多数据
		}
	}).catch(err => {
		console.error(err);
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		});
	});
};



// 触底加载更多
onReachBottom(() => {
	if (hasMoreData.value) { // 只有在还有更多数据的情况下才触发加载
		currentPage.value++; // 页码加1
		if (navArr.value[navIndex.value].id === 3) {
			loadOrders(); // 不传递 payStatus
		} else {
			loadOrders(navArr.value[navIndex.value].id); // 传递对应的 payStatus
		}
	} else {
		uni.showToast({
			title: '没有更多数据了',
			icon: 'none'
		});
	}
})


// 页面加载时调用
onLoad(() => {
	clickNav(3);
});

// 去支付的处理函数
const toPay = (number) => {
	payOrder(number).then(res => {
		// console.log(res);
		uni.showToast({
			title: '支付成功',
			icon: 'none'
		});
		console.log(navIndex.value + 1);
		clickNav(navIndex.value + 1);
	}).catch(err => {
		console.log(err);
		uni.showToast({
			title: '支付失败',
			icon: 'none'
		});
	});
	console.log(number);
};





</script>


<style lang="scss" scoped>
.home {
	.navscroll {
		height: 100rpx;
		background: #F7F8FA;
		position: fixed;
		width: 100%;
		top: var(--window-top);
		left: 0;
		z-index: 10;
		white-space: nowrap;

		::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}

		.row {
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;
			font-size: 40rpx;
		}

		.row.active {
			color: $brand-theme-color;
		}
	}

	.content {
		padding: 90rpx 0;

		.uni-card {
			.uni-card-content {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 24rpx;
				}


				button {
					margin-right: 5rpx;
					background-color: $brand-theme-color;

				}
			}
		}
		.text-center {
			font-size: 32rpx;
			color: #999;
			margin-top: 60rpx;
			display: flex;
			justify-content: center;
			align-content: center;
		}
	}

	.no-data {
		text-align: center;
		font-size: 30rpx;
		color: #999;
		margin-top: 120rpx;
	}


}
</style>